<template>
	<view class= "mask">
		<view class="inputBox">
			<image @click="close" class="closebtn" src="../../static/images/close.png" mode=""></image>
			<input class="input" type="text" @input="input" focus  :value="value" placeholder="请输入添加内容"  />
			<view class="addBtn" @click="addSubmit">添加</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"",
		data() {
			return {
				value:''
			}
		},
		methods: {
			input(e){
				this.value = e.detail.value;
			},
			addSubmit(){
				this.$emit('addSubmit',this.value);
				this.value = '';
			},
			close(){
				this.$emit('close',false);
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.inputBox{
		width: 420rpx;
		height: 360rpx;
		border-radius: 14rpx;
		background-color: #fff;
		padding: 120rpx 20rpx 0;
		@include absolute(45%,50%,-50%,-50%,'top','left');
		.closebtn{
			width: 48rpx;
			height: 48rpx;
			@include absolute(20rpx,20rpx,0,0,top,right);
		}
		.input{
			height: 76rpx;
			line-height: 76rpx;
			padding: 0 20rpx;
			border-bottom: 1rpx solid #F1F1F1;
			text-align: center;
		}
		.addBtn{
			width: 200rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: $uni-theme-color;
			color: #fff;
			border-radius: 14rpx;
			margin: 40rpx auto 0; 
		}
	}
</style>
